<template>
    <div class="manager_page_class">
        <div class="shadow_bg_class"
             style="width: 100%;color: #ffffff;padding: 12px ">

            <el-form ref="filters" :model="filters" label-width="100px">
                <el-row :gutter="20" style="margin-bottom: 0px">
                    <el-col :span="8">
                        <el-form-item label="用户名：" style="margin-bottom: 0 !important;">
                            <el-input
                                    v-model="filters.username"
                                    placeholder="用户名" clearable>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="16" style="display: flex;justify-content: space-between">
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="handleSearch">搜索
                        </el-button>
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="tableOperate('add')">新建管理员
                        </el-button>

                    </el-col>
                </el-row>

            </el-form>

        </div>
        <el-table :data="managerList" class="wxtable" style="margin-top: 12px">
            <el-table-column
                    type="index"
                    label="序号" width="80" align='center'>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="tel" label="联系电话" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="200" align='center'>
            </el-table-column>
            <el-table-column label="操作" align='center'>
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" plain
                               @click="tableOperate('edit', scope.row)" v-show="scope.row.username!='admin'">编辑
                    </el-button>
                    <el-button size="mini" type="warning" plain
                               @click="tableOperate('rest', scope.row)">重置密码
                    </el-button>
                    <el-button size="mini" type="info" plain
                               @click="tableOperate('del', scope.row)" v-show="!scope.row.admin">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-floor" v-if="managerPage.count > managerPage.rows">
            <div>

                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="managerPage.page+1"
                        :page-sizes="[10, 30, 50, 100]"
                        :page-size="managerPage.rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="managerPage.count">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="新建用户" :visible.sync="addFormVisible"   width="480px" :close-on-click-modal="false"
                   center>
            <el-form :model="addForm" label-width="140px" :rules="addFormRules" ref="addForm">

                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="tel">
                    <el-input v-model="addForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="addForm.password" show-password></el-input>
                </el-form-item>

                <el-form-item label="是否是管理员：" prop="admin">
                    <el-radio-group v-model="addForm.admin" size="small">
                        <el-radio :label="true">管理员权限</el-radio>
                        <el-radio :label="false">普通用户权限</el-radio>
                    </el-radio-group>
                </el-form-item>
              <el-form-item label="权限分配：" v-show="!addForm.admin">
              <el-checkbox-group v-model="checkRoles">
                <el-checkbox label="原始数据"></el-checkbox>
                <el-checkbox label="风险趋势"></el-checkbox>
                <el-checkbox label="基础设置"></el-checkbox>
                <el-checkbox label="管理员"></el-checkbox>
              </el-checkbox-group>
              </el-form-item>
                <el-form-item label="是否接收报警短信：" prop="sms">
                    <el-radio-group v-model="addForm.sms" size="small">
                        <el-radio :label="true">接收报警短息</el-radio>
                        <el-radio :label="false">不接收报警短息</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click.native="addFormVisible=false">取消
                </el-button>
                <el-button type="primary" @click.native="addFormSubmit" style="margin-left: 48px">提交
                </el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改用户" :visible.sync="editFormVisible" width="480px" :close-on-click-modal="false"
                   center>
            <el-form :model="editForm" label-width="140px" :rules="editFormRules" ref="editForm">

                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="tel">
                    <el-input v-model="editForm.tel"></el-input>
                </el-form-item>

                <el-form-item label="是否是管理员：" prop="admin">
                    <el-radio-group v-model="editForm.admin" size="small">
                        <el-radio :label="true">管理员权限</el-radio>
                        <el-radio :label="false">普通用户权限</el-radio>
                    </el-radio-group>
                </el-form-item>
              <el-form-item label="权限分配：" v-show="!editForm.admin">
                <el-checkbox-group v-model="checkRoles">
                  <el-checkbox label="原始数据"></el-checkbox>
                  <el-checkbox label="风险趋势"></el-checkbox>
                  <el-checkbox label="基础设置"></el-checkbox>
                  <el-checkbox label="管理员"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
                <el-form-item label="是否接收报警短信：" prop="sms">
                    <el-radio-group v-model="editForm.sms" size="small">
                        <el-radio :label="true">接收报警短息</el-radio>
                        <el-radio :label="false">不接收报警短息</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click.native="editFormVisible=false">取消
                </el-button>
                <el-button type="primary" @click.native="editFormSubmit" style="margin-left: 48px">提交
                </el-button>

            </div>
        </el-dialog>

      <el-dialog title="重置密码" :visible.sync="restPwdFormVisible" width="480px" :close-on-click-modal="false"
                 center>
        <el-form :model="restPwdForm" label-width="140px" :rules="restPwdFormRules" ref="restPwdForm">

          <el-form-item label="新密码：" prop="password">
            <el-input v-model="restPwdForm.password"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer">
          <el-button @click.native="restPwdFormVisible=false">取消
          </el-button>
          <el-button type="primary" @click.native="restPwdFormSubmit" style="margin-left: 48px">提交
          </el-button>

        </div>
      </el-dialog>
    </div>

</template>

<script>
    import manager_list_page_bus from './manager_list_page_bus.js'

    export default manager_list_page_bus

</script>
<style scoped>

</style>
